<template>
  <el-form :rules="roleRules" :model="formModel" :show-message='config.isShowMessage'>
    <el-form-item label="Role Name:" prop="roleName" :label-width="config.itemLabelWidth" :size="config.itemSize"
                  class="form-item">
      <el-input v-model="formModel.roleName" :size="config.inputSize"></el-input>
    </el-form-item>
    <el-form-item label="Role Description:" prop="roleDesc" :label-width="config.itemLabelWidth" :size="config.itemSize"
                  class="form-item">
      <el-input v-model="formModel.roleDesc" :size="config.inputSize"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  props: {
    initVisible: Boolean
  },

  data() {
    return {
      config: {
        itemLabelWidth: '160px',
        itemSize: 'mini',
        inputSize: 'mini',
        isShowMessage: false
      },
      formModel: {},
      roleRules: {
        roleName: [
          {required: true, trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    setFormModel(formModel) {
      this.formModel = formModel
    },
    getFormModel() {
      return this.formModel
    }
  }
}

</script>
